<template>
  <div>
    <Card>
      <template #content> </template>
    </Card>
    <div class="tw-mt-4">
      <Button
        label="创建代理服务"
        class="tw-w-full"
        outlined
        @click="showDialog"
      />
    </div>
  </div>
  <Dialog
    v-model:visible="state.visible"
    modal
    header="创建代理"
    :style="{ minWidth: '50rem' }"
  >
    <div>
      <div>
        <label for="serverName" class="tw-mr-2 tw-w-28 tw-inline-block"
          >服务器名称</label
        >
        <InputText
          id="serverName"
          size="small"
          v-model="state.dataForm.serverName"
          placeholder="请输入服务器名称"
        />
      </div>
      <div class="tw-mt-2">
        <label for="serverAddr" class="tw-mr-2 tw-w-28 tw-inline-block"
          >服务器地址</label
        >
        <InputText
          id="serverAddr"
          size="small"
          disabled
          v-model="state.dataForm.serverAddr"
        />
        <label for="serverPort" class="tw-mx-2">端口</label>
        <InputText
          id="serverPort"
          size="small"
          class="tw-w-24"
          v-model="state.dataForm.serverPort"
        />
        <Button
          class="tw-ml-2"
          v-tooltip="'获取一个可用的端口'"
          icon="pi pi-search"
          text
          rounded
        />
      </div>
      <div class="tw-mt-2">
        <label for="target" class="tw-mr-2 tw-w-28 tw-inline-block"
          >映射地址</label
        >
        <InputText
          id="target"
          size="small"
          placeholder="请输入映射地址"
          v-model="state.dataForm.target"
        />
      </div>
      <div class="tw-mt-2">
        <label for="pathRewrite" class="tw-mr-2 tw-w-28 tw-inline-block"
          >重写路径(可选)</label
        >
        <InputText
          id="pathRewrite"
          size="small"
          v-model="state.dataForm.pathRewrite"
          placeholder="/"
        />
        :
        <InputText
          id="pathRewrite"
          size="small"
          v-model="state.dataForm.pathRewrite"
          placeholder="/redirect/to/something"
        />
      </div>
      <div class="tw-mt-2 tw-flex tw-h-12 tw-flex-grow tw-items-center">
        <label for="target" class="tw-mr-2 tw-w-28 tw-inline-block"
          >保存报文</label
        >
        <InputSwitch v-model="state.dataForm.isSaveRaw" />
      </div>
    </div>
    <template #footer>
      <Button label="确定" icon="pi pi-check" @click="onSubmit" />
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import Card from "primevue/card";
import Button from "primevue/button";
import Dialog from "primevue/dialog";
import InputText from "primevue/inputtext";
import InputSwitch from "primevue/inputswitch";
const state = reactive({
  visible: false,
  dataForm: {
    serverName: "",
    serverAddr: "",
    serverPort: "",
    target: "",
    pathRewrite: "",
    isSaveRaw: false,
  },
});
const showDialog = () => {
  // 获取初始化数据

  state.visible = true;
};
const onSubmit = () => {};
</script>
<style lang="scss"></style>
